<template>
  <div>
    <Coninter></Coninter>
    <router-view v-slot="{ Component }" class="headerlayout">
      <transition name="fade">
        <keep-alive :max="10">
          <Component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name"></Component>
        </keep-alive>
      </transition>
      <transition name="fade">
        <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name"/>
      </transition>
    </router-view>
  </div>

</template>

<script setup>
import Coninter from "~/components/layout/copments/Coninter.vue"


function add() {
  count++
}
</script>

<style scoped lang="scss">
.headerlayout {
  height: 100vh;


  .sider {
    margin-top: 1rem;
  }
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-active {
  transition-delay: 0.3s;
}

.Footerlayout {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>